<template>
  <div>
    <a-modal v-model="visibleMsg" centered :title="false" :footer="null" @cancel="closePopup" width="40%">
      <a-descriptions :column="1" class="msg-desc">
        <a-descriptions-item label="留言">
          {{ msg.msg ? msg.msg : '-' }}
        </a-descriptions-item>
        <!-- <a-descriptions-item label="使用场景">
          {{ msg.sceneTag }}
        </a-descriptions-item> -->
        <a-descriptions-item label="想要购买的单品">
          {{ msg.goodsTag ? msg.goodsTag : '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="身高/体重"> {{ msg.height }}cm / {{ msg.weight }}kg </a-descriptions-item>
        <a-descriptions-item label="常穿尺码" v-if="allMsg.size">
          {{ allMsg.size }}
        </a-descriptions-item>
      </a-descriptions>
      <div v-for="(item, index) in allMsg.attrs" :key="index">
        <a-descriptions :column="1" class="msg-desc">
          <a-descriptions-item label="喜爱风格/主题" v-if="(allMsg.attrs[index].name == '风格管理' || allMsg.attrs[index].name == '主题搭配管理') && allMsg.attrs[index].attrValue.length > 0">
            <div v-for="(value, key) in allMsg.attrs[index].attrValue" :key="key" class="like-theme">
              <img :src="value.img" alt="" class="imgs" @click="bigImg(key, allMsg.attrs[index].attrValue, 'style')" />
              <p>{{ value.name }}</p>
            </div>
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <a-descriptions :column="1" class="msg-desc">
        <a-descriptions-item label="参考风格/单品" v-if="this.msg.imgs">
          <img :src="value" alt="" v-for="(value, index) in imgList" :key="index" class="imgs" @click="bigImg(index, imgList, 'reference')" />
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
    <BigImg :visibleImgs="visibleImgs" :imgList="bigImgList" :goToIndex="goToIndex" @closeBig="closeBig"></BigImg>
  </div>
</template>
<script>
import BigImg from './bigImg'
import { findMsg } from '@/api/box/workbench'
export default {
  components: {
    BigImg
  },
  data() {
    return {
      visibleMsg: false,
      visibleImgs: false,
      bigImgList: [],
      goToIndex: 0,
      msg: {},
      allMsg: {},
      imgList: []
    }
  },
  methods: {
    show(record) {
      findMsg(record.id)
        .then(res => {
          if (res.code === 0) {
            this.msg = res.data.customerAskBox
            this.allMsg = res.data
            if (this.msg.imgs !== null) {
              this.imgList = this.msg.imgs.split(',')
            }
            this.visibleMsg = true
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('查看留言：' + err)
        })
    },
    closePopup() {
      this.visibleMsg = false
      this.imgList = []
      this.msg = {}
    },
    // 查看大图
    bigImg(index, list, type) {
      this.visibleImgs = true
      this.goToIndex = index
      if (type === 'reference') {
        this.bigImgList = list
      } else if (type === 'style') {
        this.bigImgList = list.map(item => item.img)
      }
    },
    // 关闭大图弹窗
    closeBig(value) {
      this.visibleImgs = value
    }
  }
}
</script>
<style lang="less" scoped>
.like-theme {
  position: relative;
  display: inline-block;
  p {
    text-align: center;
    position: absolute;
    bottom: -4px;
    width: 100px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 12px;
  }
}
.imgs {
  width: 100px;
  height: 100px;
  object-fit: scale-down;
  padding: 10px;
  border: 1px dashed #cdcdcd;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.msg-desc {
  padding-top: 12px;
  /deep/ .ant-descriptions-item-label {
    width: 25%;
    text-align: right;
    float: left;
  }
  /deep/ .ant-descriptions-item-content {
    width: 73%;
    margin-left: 12px;
    display: flex;
    flex-wrap: wrap;
  }
}
</style>

